<template>
  <div>
    <div
      style="
        min-height: 100vh;
        background-image: linear-gradient(#fa9c15, #ffcb3b 20%, #fff 100%);
        overflow: hidden;
      "
    >
      <div style="height: 100%">
        <div
          class="login-logo"
          style="
            text-align: center;
            color: #fff;
            font-weight: 600;
            margin: 50px;
          "
        >
          DEMO
        </div>
        <div
          style="
            width: 5rem;
            background-color: #fff;
            margin: 20px auto;
            border-radius: 10px;
            padding: 20px 0;
          "
        >
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true }]"
            />
            <van-button
              size="small"
              round
              block
              type="warning"
              native-type="submit"
              style="width: 2.5rem; margin: 0 auto; margin-top: 30px"
              >登录</van-button
            >
            <div
              style="
                color: #fa9c15;
                font-size: 12px;
                text-align: center;
                padding: 10px 0;
              "
              @click="forgetPass"
            >
              忘记密码？
            </div>
          </van-form>
        </div>
        <van-button
          @click="registerClick"
          block
          type="warning"
          hairline
          plain
          style="margin: 0 auto; width: 4.2rem; margin-top: 50px"
          >免费注册</van-button
        >
      </div>
    </div>
    <!-- <zk-navbar title="登录" :showLeft="false" /> -->
    <!-- <div class="login-pagebar">
      <div class="login-title">demo sys</div>
      <div class="login-accountbar">
        <img class="login-accountimage" :src="ic_phone" />
        <input
          class="login-accountinput"
          type="text"
          maxlength="24"
          placeholder="请输入帐号"
          v-model="dAccount"
        />
      </div>
      <div class="login-accountbar">
        <img class="login-accountimage" :src="ic_lock" />
        <input
          class="login-accountinput"
          type="password"
          maxlength="24"
          placeholder="请输入密码"
          v-model="dPassword"
        />
      </div>
      <button class="login-submit" @click="loginClick">登录</button>
    </div> -->
  </div>
</template>
<script>
import api from "@/api/api";
import Vue from "vue";
import { Toast } from "vant";
import { Button } from "vant";

Vue.use(Button);
Vue.use(Toast);
export default {
  data() {
    return {
      titleCount: 0,
      dAccount: "",
      dPassword: "",
      ic_phone: require("../../assets/images/ic_phone.png"),
      ic_lock: require("../../assets/images/ic_lock.png"),
      submitData: api.createInputObj(),

      username: "",
      password: "",
    };
  },

  mounted() {
    let app = api.getApp();
    api.clearAccountCache();
    // let pageParam = this.$route.params;
    // if (pageParam && pageParam.reload) {
    //   app.reloadWindow();
    //   return;
    // }
    // app.initAppCache(() => {
    //   let accountValue = app.getAccountValueSync();
    //   if (accountValue && accountValue.requestUrl) {
    //     // api.jumpPage("Msg", null, true);
    //     return;
    //   }
    //   let roleList = app.getAccountRoleSync();
    //   if (roleList) {
    //     api.jumpPage("LoginRole", {
    //       roleList: roleList,
    //     });
    //     return;
    //   }
    // });
  },

  methods: {
    forgetPass(){
      api.toast("暂未开放");
    },
    registerClick() {
      api.toast("暂未开放");
    },
    onSubmit(values) {
      console.log("values", values);
      api.toast("登录成功，跳转到首页");
      api.jumpPage("Home");

    },
  },
};
</script>

<style scoped>
.login-width {
  width: 1.3rem;
}
.login-input {
  background-color: Gainsboro;
  margin-left: 0.1rem;
  width: 1.3rem;
}
.login-start {
  display: flex;
  justify-self: start;
  align-items: center;
}
.login-mar {
  margin: 0.3rem 0.2rem;
}
.login-left {
  margin-left: 0.1rem;
}
.login-pagebar {
  position: fixed;
  left: 0;
  right: 0;
  top: 1rem;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.login-title {
  align-self: center;
  margin: 0.5rem 0;
  color: #2c79b6;
  font-size: 0.54rem;
}

.login-accountbar {
  margin-bottom: 0.24rem;
  padding: 0.16rem 0.32rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: solid 0.03rem #eee;
}

.login-accountimage {
  margin-right: 0.32rem;
  width: 0.27rem;
  min-width: 0.27rem;
  height: 0.41rem;
}

.login-accountinput {
  border: none;
  font-size: 0.34rem;
}

.login-submit {
  margin: 1.2rem 0.8rem;
  padding: 0.1rem;
  font-size: 0.38rem;
  color: #fff;
  background-color: #2c79b6;
  border: none;
  border-radius: 1rem;
}
</style>